.zone-content, #content, #main, #layout-content, #layout-main {
    height: 100%;
    display: block;
    min-height: 400px;
    margin-bottom: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#main {
    margin-bottom: 0;
    height: 100%;
}

#content {
    /*  
        Hack the size of the container under border-box, 
        because the table-caption is added to the size of 
        the table (weird behavior).
        e.g.,

        #content height is 100%.
        #media-library height is 100% and box-sizing is border-box, so the whole
        table should fit into the #content, including the border and padding. But it 
        actually overflows. Hiding the caption makes everthing ok, so it means the caption
        is not taken into account when the browser calculates the box size of the table.
    */
    padding-bottom: 56px; /* 26px like other edges + 34px to cancel the size of the toolbar */
}

#media-library, #media-library-import {
    display: table;
    width: 100%;
    height: 100%;
    border: 1px solid #e0e0e0;
    border-width: 0 1px 1px 1px;
    background-color: white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#media-library-toolbar {
    display: table-caption;
    border-bottom: 1px solid #e0e0e0;
    height: 32px;
}

#media-library-toolbar-actions {
    display: inline-block;
    float: right;
}

#media-library-toolbar label {
    display: inline;
}

#media-library-main {
    display: table-row;
    border-bottom: 1px solid #e0e0e0;
    height: 100%;
}

#media-library-main-navigation {
    vertical-align: top;
    min-width: 220px; /*Width of left column*/
    max-width: 220px;
    height: 85vh;
    overflow-y: scroll;
    overflow-x: auto;
    border-right: 1px solid #e0e0e0;
}
    #media-library-main-navigation > ul { /* sub-navigations, e.g. folders */
    }

    #button-recent {
        display: block;
        padding:2px;
    }
    
    #button-recent:hover, #button-recent.selected  {
        cursor: pointer;
        background-color: #e0e0e0;
    }

        #button-recent i {
            color: rgb(75,75,75);
            padding-left:3px;
            padding-right: 5px;
            font-size:14px;
        }

.media-library-folder-title {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid transparent;
    width: 100%;
}

    .media-library-folder-title.dropping {
        border-color: #444;
    }

    .media-library-folder-title:hover, .media-library-folder-title.selected  {
        cursor: pointer;
        background-color: #e0e0e0;
    }

    .in-progress .media-library-folder-title:hover, .in-progress .media-library-folder-title.selected, .in-progress a  {
        cursor: progress;
    }

    .media-library-navigation-folder-link {
        padding: 0;
    }

        .media-library-navigation-folder-link i {
            color: #808080;
            padding-left:3px;
            padding-right: 5px;
            font-size:14px;
        }

    .media-library-folder ul {
        margin: 0;
        padding: 0;
        padding-left: 16px;
    }

    .media-library-folder-title {
        display: inline-block;
        white-space: nowrap;
    }

#media-library-main-list-wrapper {
    vertical-align: top;
    display: table-cell;
    height: 85vh;
    width: 100%;
}

    #media-library-main-list {
        width: auto;
        height: 85vh;
        padding-left: 3px;
        padding-top: 3px;
        overflow-y: auto;
        overflow-x: hidden;
    }

        #media-library-main-list.pending {
            background-image: url('images/folders-loader.gif');
            background-repeat: no-repeat;
            background-position: center;
        }

        #media-library-main-list.pending li {
            opacity:.3;
        }

    /* Remove the space for the editor, and the scrollbar in the import page */
    #media-library-import #media-library-main-list {
        overflow-y: hidden;
        padding: 0;
        margin: 0;
    }

#media-library-import .import-provider {
    padding-left: 5px;
    line-height: 24px;
}

    #media-library-import .import-provider:hover {
        background-color: #e0e0e0;
    }

#media-library-main-editor {
    display: table-cell;
    vertical-align: top;
    min-width: 190px; /*Width of right column - padding*/
    height: 100%;
    padding: 10px 10px 0px 10px;
    background: #fafafa;
    color: grey;
    border-left: 1px solid #e0e0e0;
    overflow-y: auto;
}

    #media-library-main-editor em {
        font-weight: bold;
    }

    #media-library-main-editor h1 {
        font-size: 12px;
        line-height: 32px;
    }


    #media-library-main-editor footer, #media-library-main-editor .properties {
        margin-top: 10px;
        overflow: hidden;
        -ms-word-break: break-all;
        word-break: break-all;
    }

    #media-library-main-selection {
        margin-top: 10px;
        overflow: hidden;
    }

    #media-library-main-editor .properties span {
        overflow: hidden;
    }

#media-library-main-selection li {
    float: left;
    margin: 0 3px 3px 0;
    padding: 0;
    width: 120px;
    height: 120px;
}

#media-library-main-selection .selection {
    margin: 0;
    padding: 0;
    height: 120px;
}

#media-library-main-selection .media-thumbnail > img {
    width: 120px;
    height: 120px;
}

#media-library-main-selection-actions:before {
    display: block;
    content: '.';
    clear: both;
    visibility: hidden;
}

#media-library-main-list-frame {
    width: 100%;
    height: 100%;
    margin-right: 10px;
    border: none;
}

#media-library-main-list li {
    margin-right: 4px;
    margin-bottom: 4px;
    float: left;
    position: relative;
    width: 200px;
    height: 200px;
    border: 4px solid transparent;
}


#media-library-main-list li.selected{border:4px #3C822E solid}
#media-library-main-list li.selected:after{width:0;height:0;border-top:40px solid #3C822E;border-left:40px solid transparent;position:absolute;display:block;right:0;content:".";color: transparent;top:0;z-index:1000}
#media-library-main-list li.selected:before{position:absolute;content:url();margin-right:-5px;color:#fff;right:5px;font-family:Tahoma;z-index:2000}

#media-library-main-list li.has-focus {
}

#media-library-main-list .media-thumbnail {
    width: 200px;
    height: 200px;
    overflow:hidden;
}

#media-library-main-selection .media-thumbnail {
    width: 120px;
    height: 120px;
    overflow:hidden;
}

.media-thumbnail-o-embed {
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-image: none;
    -moz-box-sizing: inherit;
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.media-thumbnail-image {
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.media-thumbnail-video {
    background-image: url('');
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #e0e0e0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.media-thumbnail-audio {
    background-image: url('');
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #e0e0e0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.media-thumbnail-document {
    background-image: url('');
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #e0e0e0;
}

.media-library-main-list-overlay {
    position: absolute;
    top: 160px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: right;
    font-size: 12px;
    opacity: 0.6;
}

.media-library-main-list-overlay p {
    padding-right:5px;  
}

    .media-library-main-list-overlay .title {
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        text-wrap: none;
    }

    .media-library-main-list-overlay .publication-status {
        font-style: italic;
    }

    .ui-draggable-dragging .media-library-main-list-overlay{
        display: none;
    }

    /* the draggable element*/
    .dragged-selection {
        z-index: 3000; /* above the checkmark */
    }

    /* the element representing the number of selected elements in the dragged element */
    .draggable-selection {
        position: absolute;
        top: 25%;
        bottom: 25%;
        left: 25%;
        right: 25%;
        background-color: #222;
        color: white;
        /*opacity: 0.6;*/
    }

        .draggable-selection p {
            padding-top: 33%;
            height: 100%;
            line-height: 100%;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }

    .ui-draggable-dragging.over {
        opacity: 0.2;
    }

.summary audio {
    width: 100%;
}

.summary video {
    width: 100%;
}

#media-library-main-selection-select {
    display: none;
    margin-top: 20px;
}

#media-library-main-navigation .navicon {
    padding:0 0 0 0;
    background-repeat: no-repeat;
    background-position: left;
    display: block;
}
 
@media (max-width: 1419px) { 
    #media-library-main-list li, #media-library-main-list .media-thumbnail {
        width: 120px;
        height: 120px;
    }

    #media-library-main-list li img, .dragged-selection img {
        width: 120px;
        height: 120px;
    }

    .media-library-main-list-overlay {
        display: none;
    }
}
 
@media (max-width: 1190px) { 
    #media-library-main-list li, #media-library-main-list .media-thumbnail {
        width: 80px;
        height: 80px;
    }

    #media-library-main-list li img, .dragged-selection img{
        width: 80px;
        height: 80px;
    }

    .media-library-main-list-overlay {
        display: none;
    }
}


/* RTL */

.dir-rtl #media-library-toolbar-actions {
    float: left;
}

.dir-rtl #media-library-main-navigation {
    border-right: inherit;
    border-left: 1px solid #e0e0e0;
}

.dir-rtl #button-recent i {
    padding-left: 5px;
    padding-right: 3px;
}

.dir-rtl .media-library-navigation-folder-link i {
    padding-left: 5px;
    padding-right: 3px;
}

.dir-rtl .media-library-folder ul {
    padding-left: 0;
    padding-right: 16px;
}

.dir-rtl #media-library-main-list {
    padding-left: inherit;
    padding-right: 3px;
}

.dir-rtl #media-library-import .import-provider {
    padding-left: inherit;
    padding-right: 5px;
}

.dir-rtl #media-library-main-editor {
    border-left: inherit;
    border-right: 1px solid #e0e0e0;
}

.dir-rtl #media-library-main-selection li {
    float: right;
    margin: 0 0 3px 3px;
}

.dir-rtl #media-library-main-list-frame {
    margin-right: inherit;
    margin-left: 10px;
}

.dir-rtl #media-library-main-list li {
    margin-right: inherit;
    margin-left: 4px;
    float: right;
}

.dir-rtl #media-library-main-list li.selected:after {
    border-left: inherit;
    border-right: 40px solid transparent;
    right: inherit;
    left: -3px;
}

.dir-rtl #media-library-main-list li.selected:before {
    margin-right: inherit;
    margin-left: 0;
    right: inherit;
    left: 5px;
}

.dir-rtl .media-library-main-list-overlay {
    left: inherit;
    right: 0;
    text-align: left;
}

.dir-rtl .media-library-main-list-overlay p {
    padding-right: inherit;
    padding-left: 5px;
}

.dir-rtl #media-library-main-navigation .navicon {
    background-position: right;
}